<template>
  <div class="purse">
    <div class="purse_header">
      <top-bar :barObj="barObj"/>
      <div class="icon"></div>
      <div class="num">
        {{gold}}
        <span>章鱼丸</span>
      </div>
    </div>
    <div class="content">
      <div class="title"></div>
      <ul>
        <li v-for="(item,index) in SzHb" :key="index" @click="detail(item)">
          <div class="name">
            <img :src="currency[item.MCCode]" alt>
            <!-- <img src="../../assets/img/XLM.png" alt> -->
            <!-- /PS -->
            <span>{{item.MCCode}}</span>
          </div>
          <div class="txt">
            <span>{{item.ZS}}</span>
            <br>
            <span class="b" v-if="item.MCCode != 'HIW'">={{ item.ZS*item.BL }}章鱼丸</span>
          </div>
        </li>
      </ul>
    </div>
    <footer-nav class="footer_nav"/>
  </div>
</template>
<script>
import footerNav from "@/components/footerNav";
import topBar from "@/components/topBar";
import { GetQbCreatePs, getUserInfo } from "../../api";
import { getGuid } from "../../utils/index";
import { mapGetters } from "vuex";
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      barObj: {
        isBack: false,
        backVal: "",
        title: "钱 包",
        iconLink: {
          path: "/record"
        }
      },
      gold: "",
      SzHb: []
    };
  },
  components: {
    footerNav,
    topBar
  },
  computed: {
    ...mapGetters(["user", "currency"])
  },
  mounted() {
    this.getBtcList();
  },
  methods: {
    detail(item) {
      if (item.MCCode == "HIW") {
        Toast({
          message: "该货币暂未开放",
          duration: 3000
        });
        return;
      }
      this.$router.push("/detail/" + item.MCCode);
    },
    getBtcList() {
      let id = localStorage.zyUserId;
      //其他货币
      GetQbCreatePs({
        ID: id,
        LoginMachine: getGuid()
      }).then(res => {
        if (res.data && res.data.Success) {
          this.SzHb = res.data.EntityList[0].SzHb;
          //BL兑换比例
          this.getPs();
        } else {
          Toast({
            message: res.data.Content,
            duration: 3000
          });
          // this.$router.push("/login");
        }
      });
    },
    //获取章鱼币
    getPs() {
      let id = localStorage.zyUserId;
      getUserInfo({
        ID: id,
        LoginMachine: getGuid()
      }).then(res => {
        if (res.data && res.data.Success) {
          this.gold = res.data.EntityList[0].Gold;
          this.SzHb.unshift({ MCCode: "PS", BL: 1, ZS: this.gold });
        } else {
          Toast({
            message: res.data.Content,
            duration: 3000
          });
          // this.$router.push("/login");
        }
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
.purse {
  width: 7.5rem;
  margin: 0 auto;
  font-family: 'PingFang-SC-Medium';
  padding-bottom: 1.1rem;
  box-sizing: border-box;

  .purse_header {
    height: 4.9rem;
    background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));
    padding-top: 0.7rem;

    .topBar {
      display: flex;
      text-align: center;
      justify-content: space-around;
      color: #fff;

      .bar {
        flex: 1;
        margin: 0 20px;
        font-size: 17px;
      }

      .bar:nth-child(1) {
        text-align: left;
        font-size: 15px;
      }

      .bar:nth-child(3) {
        text-align: right;
      }
    }

    .icon {
      width: 1.06rem;
      height: 1.07rem;
      background: url('../../assets/img/ps_1.png');
      background-size: 100% 100%;
      margin: 30px auto;
    }

    .num {
      font-size: 33px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      margin-top: 22px;
      text-align: center;

      span {
        font-size: 16px;
        position: relative;
        bottom: 10px;
      }
    }
  }

  .content {
    width: 7.1rem;
    background: #fff;
    border-radius: 10px;
    margin: -35px auto 0 auto;

    .title {
      width: 3.05rem;
      height: 0.63rem;
      margin: 0 auto 20px auto;
      background: url('./img/Assets_title.png');
      background-size: 100% 100%;
    }

    ul {
      height: 50vh;
      overflow: scroll;

      li {
        width: 6.67rem;
        border-bottom: 1px solid #E6E6E6;
        margin: 0 auto;
        height: 1.3rem;

        .name {
          float: left;

          img {
            width: 0.9rem;
            height: 0.9rem;
            margin: 10px;
          }

          span {
            font-style: 16px;
          }
        }

        .txt {
          float: right;
          margin: 15px 0 0 0;
          text-align: right;

          span {
            display: inline-block;
            line-height: 22px;
            font-weight: 500;
            font-size: 16px;
          }

          .b {
            color: #595959;
            font-size: 13px;
          }
        }
      }
    }
  }
}

.footer_nav {
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>
